<template>
    <div id="helpVideo">
        <el-tabs>
           <el-tab-pane  v-for="(item,index) in newList" :key="index" v-model="item.select" v-show="active == index"  :label="item.title">
            <div v-if="item.outerContent" class="navbox">
              <div v-for="(item1,index1) in item.outerContent" :key="index1" class="itembox" @click="clickItem(index1,item1)">
                <div v-html="item1.bg" class="imgbox"></div>
                <div class="msgbox">
                   <p class="subtitle">{{ item1.detailName }}</p>
                   <p class="submsg">{{ item1.detailText }}</p>
                </div>
              </div>
            </div>
            <div class="waitMsg" v-html="item.detailText"></div>
           </el-tab-pane>
         </el-tabs>
    </div>
</template>

<script>
    export default {
        props:{
            list:{
                type:Array,
                required: true
            }
        },
        data(){
            return {
                newList:[],
                active:0,
                activeName: '',
            }
        },
        created(){
           this.newList = this.list
        },
        watch:{
            list( newData , old ){
                this.newList = [...newData]
            }
        },
        methods:{
            clickItem(index,item){
               this.active = index
               this.$emit('tohelpDetails',item)
            },
            getIndex(e){
              this.$emit('tohelpDetails',this.$refs.name.$el.tabIndex )
             }
        }
    }
</script>

<style lang="stylus" scoped>
#helpVideo
   width 100%
   overflow hidden
   .waitMsg
       font-size 14px
       color #5E5E5E 
       margin-top 10px
       line-height 25px
   .navbox
     width: 200px;
     height: 194px;
     display flex
     width: 100%;
     height: 100%;
     flex-wrap wrap
     .itembox 
        margin 10px 20px 20px 0
       .imgbox
         width: 200px;
         height: 128px;
       .msgbox 
        padding 10px
        border 1px solid #E9E9E9
        width: 200px;
        height: 66px;	
        box-sizing border-box
        cursor pointer
        .subtitle
           font-size 13px
           font-weight 600
           color rgba(16, 16, 16, 1)
           margin-bottom 10px
        .submsg 
           font-size 12px
           color rgba(146, 146, 146, 1)
</style>
<style lang="stylus">
  .el-tabs__item 
   font-size 16px
   font-family SourceHanSansSC-regular
</style>